<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue的入门案例</title>
        <!-- 第1步：引入vue.js的脚本 -->
        <script type="text/javascript" src="../plugins/vue/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <!-- 注意：在被 vue所管理的html标签区间，我们使用的所有变量，都是来自于vue的data:{ 这里面定义的变量} -->
            v-for的使用特点：<br/>
                    v-for是用来进行循环的。它的循环特点：你需要针对html的哪一个标签进行循环，就在这个标签里面，添加上v-for即可<br/>
                    v-for在使用中，还可以获取到循环时的索引值（循环下标）
            <ul>
                <li v-for="abc in nameArray">
                    {{abc}}
                </li>

            </ul>
            <br/>
            <ul>
                <!-- 需求：如果循环数据过程中，出现的是奇数行，直接将这行数据不显示 -->
                <li v-for="(item,index) in stuArray" v-if="index %2 == 0">
                   序号：{{index}}, 姓名：{{item.name}},年龄：{{item.age}},地址：{{item.address}}
                </li>
            </ul>

        </div>

    </body>
    <script>
        /* 3. 在js脚本中，添加一个绑定vue到id=app的根标签*/
        new Vue({
            el: "#app",
            data: {
                message: "我是一个vue语法中定义的变量",
                //定义一个数组的变量
                nameArray:['张三','李四','王五','赵六'],
                //定义一个数据对象
                stuArray:[
                    {'name':'张三1',age:18,'address':'湖北武汉长城科技园'},
                    {'name':'张三2',age:18,'address':'湖北武汉长城科技园'},
                    {'name':'张三3',age:18,'address':'湖北武汉长城科技园'},
                    {'name':'张三4',age:18,'address':'湖北武汉长城科技园'},
                    {'name':'张三5',age:18,'address':'湖北武汉长城科技园'},
                    {'name':'张三6',age:18,'address':'湖北武汉长城科技园'},
                ]


            },
            methods: {}

        })


    </script>
</html>
